<template>
  <div class="page">
    <h2>专库实时监控</h2>

    <div class="controls">
      <el-input v-model="q" placeholder="按名称/编码/位置搜索" clearable style="flex:1" @clear="onClear" />
      <el-select v-model="filterAlert" placeholder="全部状态" style="width:160px">
        <el-option label="全部" :value="''" />
        <el-option label="正常" value="ok" />
        <el-option label="低于阈值" value="low" />
        <el-option label="缺货" value="out" />
      </el-select>
      <div style="display:flex;gap:8px">
        <el-button @click="refresh">刷新</el-button>
        <el-button @click="exportCSV">导出CSV</el-button>
      </div>
    </div>

    <div class="muted">页面为前端静态演示，数据来源为演示数据。实际系统应接入专库设备及库存同步接口，实现实时上报与阈值告警。</div>

    <el-table :data="filtered" stripe border style="width:100%;margin-top:12px">
      <el-table-column prop="code" label="编码" width="120" />
      <el-table-column prop="name" label="药品名称" />
      <el-table-column prop="location" label="库位/专柜" width="160" />
      <el-table-column prop="quantity" label="库存数量" width="120" />
      <el-table-column prop="threshold" label="预警阈值" width="120" />
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status==='ok' ? 'success' : (row.status==='low' ? 'warning' : 'danger')">{{ statusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updatedAt" label="最后上报" width="180" />
    </el-table>

    <div style="margin-top:8px;display:flex;gap:8px;align-items:center">
      <el-button type="primary" @click="simulateAlert">模拟告警</el-button>
      <div style="flex:1"></div>
      <div class="muted">总记录：{{ filtered.length }} 项</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const q = ref('');
const filterAlert = ref('');
const data = ref([]);

const DEFAULT_DATA = [
  { id:1, code:'S-001', name:'氟哌啶醇注射液', location:'专库A-01', quantity:120, threshold:30, status:'ok', updatedAt:'2025-10-26 09:12' },
  { id:2, code:'S-002', name:'劳拉西泮片', location:'专库A-02', quantity:18, threshold:20, status:'low', updatedAt:'2025-10-26 08:56' },
  { id:3, code:'S-003', name:'奥氮平片', location:'专库B-01', quantity:0, threshold:10, status:'out', updatedAt:'2025-10-25 14:30' },
  { id:4, code:'S-004', name:'氯硝西泮片', location:'专库B-02', quantity:45, threshold:20, status:'ok', updatedAt:'2025-10-26 10:02' }
];

onMounted(()=>{ data.value = JSON.parse(JSON.stringify(DEFAULT_DATA)); });

const filtered = computed(()=>{
  const qq = q.value.trim().toLowerCase();
  return data.value.filter(d=>{
    if(qq && !(d.name.toLowerCase().includes(qq) || d.code.toLowerCase().includes(qq) || d.location.toLowerCase().includes(qq))) return false;
    if(filterAlert.value && d.status !== filterAlert.value) return false;
    return true;
  });
});

function statusLabel(s){ if(s==='ok') return '正常'; if(s==='low') return '低于阈值'; return '缺货'; }
function refresh(){ ElMessage.success('已刷新（演示）'); }
function exportCSV(){ const rows = [['id','code','name','location','quantity','threshold','status','updatedAt'], ...data.value.map(r=>[r.id,r.code,r.name,r.location,r.quantity,r.threshold,r.status,r.updatedAt])]; const txt = rows.map(r=>r.map(c=>`"${String(c).replace(/"/g,'""')}"`).join(',')).join('\n'); const blob = new Blob([txt],{type:'text/csv'}); const url = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download='special_library_monitor.csv'; a.click(); URL.revokeObjectURL(url); }
function simulateAlert(){ ElMessage.warning('模拟：劳拉西泮片 库存低于阈值'); }
function onClear(){}
</script>

<style scoped>
.page{font-family: Arial, "Microsoft YaHei", sans-serif; margin:10px;}
h2{margin-top:-10px}
.controls{display:flex;gap:8px;margin-bottom:12px;align-items:center}
.muted{color:#666;font-size:13px}
</style>